<template>
  <div>
    <la-dialog
      ref="dialogRef"
      :title="dialogTitle"
      :async="true"
      @confirm="handleSubmit"
      @cancel="handleClose"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <el-form-item label="头像" prop="avatar">
          <la-uploader v-model="formData.avatar" />
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="formData.nickname" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="所属部门" prop="dept_ids">
          <el-tree-select
            v-model="formData.dept_ids"
            :data="deptOptions"
            :render-after-expand="true"
            :props="{
              children: 'children',
              label: 'name',
              value: 'id',
              isLeaf: 'leaf',
            }"
            show-checkbox
            check-strictly
            check-on-click-node
            multiple
            value-key="id"
            placeholder="请选择部门"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role_ids">
          <el-select
            v-model="formData.role_ids"
            multiple
            placeholder="请选择角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
<script setup>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
import { reactive, ref, computed, nextTick } from "vue";
import feedback from "@/lnk/utils/feedback";

const emit = defineEmits(["success", "close"]);
const dialogRef = ref(null);
const formRef = ref(null);
const mode = ref("add");
const formData = ref({
  username: "",
  password:"",
  role_ids: [],
  dept_ids: [],
  status: "normal",
});
const formRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 2, message: "用户名最小为3个字符串" },
  ],
  // password: [
  //   { required: true, message: "请输入密码", trigger: "blur" },
  //   { min: 2, message: "用户名最小为6个字符串" },
  // ],
  role_ids:[
  { required: true, message: "请选择角色", trigger: "blur" },
  ],
  dept_ids:[
  { required: true, message: "请选择部门", trigger: "blur" },
  ]
});

const roleOptions = ref([]);
const deptOptions = ref([]);

const dialogTitle = computed(() => {
  return mode.value == "edit" ? "编辑用户" : "新增用户";
});

const getRoleOptions = async () => {
  const roleRes = await api.role.list();
  roleOptions.value = roleRes.data;
};

const getDeptOptions = async () => {
  const res = await api.dept.list();
  deptOptions.value = res.data;
};

const setFormData = async (row) => {
  const res = await api.admin.read({ id: row.id });
  formData.value = res.data;
};

const open = (type = "add") => {
  mode.value = type;
  dialogRef.value.open();
};
const close = () => {
  formRef.value.resetFields();
  dialogRef.value.close();
  emit("close");
};
const handleSubmit = async () => {
  await formRef.value?.validate();
  let res;
  if (mode.value == "add") {
    res = await api.admin.create(formData.value);
  } else {
    res = await api.admin.update(formData.value);
  }

  if (!res.error) {
    close();
    emit("success");
    feedback.msgSuccess(res.msg);
  } else {
    feedback.msgError(res.msg);
  }
};
const handleClose = async () => {};
getRoleOptions();
getDeptOptions();
defineExpose({
  open,
  setFormData,
});
</script>
